<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .switch {
            height: 100px;
            width: 200px;
            background: #1890ff;
            border-radius: 50px;
            padding: 8px;
            box-sizing: border-box;
        }
        .switch.off {
            background: #ccc;
        }
        /* 按钮在右侧的样式 */
        .switch .btn {
            height: 84px;
            width: 84px;
            background: #fff;
            border-radius: 42px;
            float: right;
            transition: transform .3s ease, width .3s ease;
        }
        /* 按钮在左侧的样式 */
        .switch .btn.off {
            transform: translateX(-100px);
        }

        /* 鼠标按下时的.switch .btn */
        .switch:active .btn {
            width: 100px;
        }

        .switch:active .btn.off {
            transform: translateX(-84px);
        }

    </style>
</head>
<body>
    <div class="switch">
        <div class="btn"></div>
    </div>

    <script src="../lib/jquery.min.js"></script>
    <script>

        $('.switch').on('click', function () {
            $('.switch').toggleClass('off');
            $('.switch .btn').toggleClass('off');
        });

        // 获取文字
        $(选择器).text();
        $(选择器).html();

        // 获取宽高
        $(选择器).width();
        $(选择器).height();

        // 设置属性
        $(选择器).attr({
            属性名1: 属性值1,
            属性名2: 属性值2,
        });

        // 获得属性值
        $(选择器).attr('id');

        // 设置行内样式
        $(选择器).css({
            属性名1: 属性值1,
            属性名2: 属性值2,
        });

        // 设置class
        $(选择器).attr({ 'class': 新类名 });
        $(选择器).addClass(类名);
        $(选择器).removeClass(类名);
        $(选择器).toggleClass(类名); // 有就去掉 没有就加上

        // 添加事件
        $(选择器).on('click', function (e) {
            // e不是原生js的event
            // this是原生的this
            // $(this)用jquery包装原生DOM
        });


        // resize
        $(window).on('resize', () => {

        });

    </script>
</body>
</html>